iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

前端幼鳥三十天養成記系列 第 24

在全域宣告的let

  • 分享至 

  • xImage
  •  
//宣告全域變數
var v = 'global'
let l = 'global'

//建立function
var obj={test:function(){return()=>{}}}
arrow=obj.test();

//顯示對象屬性
console.dir(window);
console.dir(obj.test)
console.dir(arrow);

在全域宣告的變數存哪

變數會存在[[scope]]裡面,我們在window object底下看到用var宣告的變數,但沒有看到用let
在widow object找宣告的全域變數var v 和let l
打開全域底下的function:test function
看到用let宣告的l,在[[scope]][0]:script
var宣告的變數,在[[scope]][1]:global window objecct
在test funtion找宣告的全域變數var v 和let l
所以let宣告的全域變數就是存在全域底下function的[[scope]][0]:script中嗎?
倒也不完全正確,因為看arrow function也可以看到[[scope]][0]:script也有
在arrow function找宣告的全域變數var v 和let l

為甚麼function中可以引用到用let宣告的全域變數,但透過window.l卻找不到

現在我們可以說明這個問題了:

  • 在function中找用let宣告的變數的流程:

    1. function的屬性列表找到[[scope]]
    2. [[scope]]對應到scope chain列表
    3. scope chain[0][n]找變數
    4. [0]:script中找到l
  • 在function中,用window.l找用let宣告的變數

let l=5; 
console.log(window.l) //undefined

原因:在全域找l屬性,找不到。
因為用let令的全域變數,從來都沒有儲存在window object上面過


上一篇
預編譯
下一篇
閉包 跟 scope chain
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言